<template>
  <div>
    <common-head title="商品列表"/>
    <!-- 排序栏 -->
    <div class="container item-sort">
        <div :class="['sort','sale',{
          active: sort.by === 0}]" @click="sortBy(0)">
          <span>销量</span>
          </div>
        <div :class="['sort', 'price',{
          active: sort.by === 1 && sort.updown ===0}]" @click="sortPrice">
          <span>价格</span>
          <div :class="['angle', 'up',{
            active: sort.by === 1 && sort.updown === 0
          }]"></div>
          <div :class="['angle', 'down',{
            active: sort.by === 1 && sort.updown === 1
          }]"></div>
          </div>
        <div :class="['sort', 'news',{
          active: sort.by === 2}]" @click="sortBy(2)">
          <span>新品</span>
          </div>
    </div>
    <!-- 排序栏 -->
    <!-- 列表详情 -->
    <div v-if="isShow">
      <van-card id="num" v-for="item in items" :key="item.id" @click="goDetail(item.id)"
      :num="item.stores"
      :tag="item.recommendStatusStr"
      :price="item.minPrice"
      :desc="item.characteristic ? item.characteristic : '暂无商品描述'"
      :title="item.name"
      :thumb="item.pic"
      :origin-price="item.originalPrice"
      >
      <template #tags>
        <van-tag plain type="danger">打折</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" icon="gouwugouwuchedinggou" icon-prefix="icon"></van-button>
      </template>
      </van-card>
    </div>
    <!-- 列表详情 -->
    <!-- 空状态 -->
    <div v-else class="empty-box">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="这里没有想要给你看的商品哟"
        />
    </div>
    <!-- 空状态 -->
  </div>
</template>

<script>
import CommonHead from '_components/CommonHead.vue'
import { fetchItemList } from '_api'
export default {
  name: 'Listitem',
  data () {
    return {
      isShow: true,
      items: [], // 表示商品详情列表
      sort: {
        by: 0, // 0表示销量 1表示价格 2表示新品
        updown: 0 // 0表示价格升序 1表示价格降序
      }
      // orderBy: 'ordersDown' // 请求排序接口的字段
    }
  },
  created () {
    this.fetchItemLists()
  },
  methods: {
    // 跳转到详情页
    goDetail (id) {
      this.$router.push({
        path: '/detail',
        query: { id }
      })
    },
    // 处理销量和新品排序问题
    sortBy (n) {
      this.sort.by = n
      this.fetchItemLists()
    },
    // 处理价格排序问题
    sortPrice () {
      /*
        处理点击时排序的默认状态
        1.从销量和新品点击到价格，价格一直是按价格升序
        2.重复点击价格，在升序和降序之间切换
      */
      if (this.sort.by !== 1) {
        // 按照销量和新品来排序，将价格排序状态重置为按价格升序
        this.sort.updown = 0
        this.sort.by = 1
        this.fetchItemLists()
      } else {
        // 按照价格排序
        if (this.sort.updown === 0) {
          // 按照价格升序时，需要将updown重置为降序1
          this.sort.updown = 1
          this.sort.by = 1
        } else {
          // 按照价格降序时，需要将updown重置为0
          this.sort.updown = 0
          this.sort.by = 1
        }
        this.fetchItemLists()
      }
    },
    // 请求列表数据
    fetchItemLists () {
      fetchItemList({
        categoryId: this.$route.query.id,
        orderBy: this.orderBy
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
          this.isShow = true
        }
        if (res.data.code === 700) {
          this.isShow = false
          this.items = []
        }
      })
    }
  },
  computed: {
    // 通过计算属性，只要orderBy的依赖sort.by改变，计算属性就会重新计算orderBy
    orderBy () {
      let orderBy = 'ordersDown'
      switch (this.sort.by) {
        case 0:
          orderBy = 'ordersDown'
          break
        case 1:
          if (this.sort.updown === 0) {
            orderBy = 'priceUp'
          } else {
            orderBy = 'priceDown'
          }
          break
        case 2:
          orderBy = 'addedDown'
          break
        default:
          break
      }
      return orderBy
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
  // 排序导航栏样式
  .item-sort{
    display: flex;
    justify-content: space-around;
    .sort{
      font-size: 20px;
      line-height: 40px;
      color: #999;
      &.active{
        color: orangered;
        }
      &.price{
        position: relative;
        .angle {
          position: absolute;
          border: 6px solid transparent;
          width: 0;
          height: 0;
          right: -18px;
          &.up{
            top: 7px;
            border-bottom-color: #999;
            &.active{
              border-bottom-color: orangered;
            }
          }
          &.down{
            top: 22px;
            border-top-color: #999;
            &.active{
              border-top-color: orangered;
            }
          }
        }
      }
    }
  }
  // 列表详情样式
  #num{
  .van-card__title{
    font-size: 16px;
    padding: 5px;
  }
  .van-card__desc{
    padding: 5px;
  }
  .van-tag{
    margin: 0 5px 5px 5px;
  }
  .van-card__price-currency{
    padding: 5px;
  }
  .icon {
    font-size: 22px;
    color: orangered;
  }
}
// 空状态
.empty-box{
  .van-empty{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-image .van-empty__image {
    width: 2.4324rem;
    height: 2.4324rem;
  }
  ::v-deep .van-empty__description{
    padding: 0;
  }
}
</style>
